<template>
	<view class="goods-list-container">
		<view class="search-box">
			<my-search :keywords="keywords" keywordsStyle="#000" :radius="4" @click="gotoSearch"></my-search>
			<view class="condition-box">
				<view class="condition" :class="[current === index ? 'active' : '']" v-for="(item, index) in conditions" :key="index" @click="changeHandler(item, index)">
					{{ item }}
				</view>
				<view class="setting" @click="changeMode">
					<uni-icons type="gear" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="goods-list" :class="[mode ? 'flex' : '']" v-if="searchResult && searchResult.length > 0">
			<block v-for="goods in searchResult" :key="goods.goodsId">
				<navigator :url="`../goods_detail/goods_detail?goodsId=${goods.goodsId}`" :style="{ width: mode ? '50%' : '' }">
					<my-goods :goods="goods" :row="mode"></my-goods>
				</navigator>
			</block>
		</view>
		<view class="not-fount" v-else>
			<image src="../../static/cry.png"></image>
			暂无商品
		</view>
		<view :class="['filter-wrapper', show ? 'show' : 'none']" >	
			<view :class="['filter-mask', show ? 'show' : 'none']" @click.self="closeFilter"></view>
			<view :class="['filter-box', show ? 'show' : 'none']">
				<scroll-view scroll-y="true" >
					<view class="terms-box">
						<view class="condition">价格区间</view>
						<view class="condition-value">
							<input type="text" placeholder="最低价" v-model="params.start" @blur="check"> <text>—</text> <input type="text" placeholder="最高价" v-model="params.end" @blur="check">
						</view>
					</view>
					<view class="terms-box">
						<view class="condition">品牌</view>
						<view class="condition-value tagbox">
							<view class="tag" :class="params.brandId === item.id ? 'active': ''"
							v-for="item in brandOptions" 
							:key="item.id" 
							@click="addBrandCondition(item)">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="terms-box" v-if="!haveCate">
						<view class="condition">分类</view>
						<view class="condition-value tagbox">
							<view class="tag" :class="params.cateId === item.id ? 'active': ''"
							v-for="item in cateOptions" 
							:key="item.id"
							@click="addCateCondition(item)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn-box">
					<view class="reset" @click="reset">
						重置
					</view>
					<view class="sure" @click="sure">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				keywords: '',
				historyList: [],
				recommendList: [],
				searchResult: [],
				brandOptions: [],
				cateOptions: [],
				conditions: ['综合', '销量', '价格', '新品', '筛选'],
				params: {
					keyword: '',
					cateId: '',
					// orderByPrice: 0,
					orderBySales: '',
					// fresh: '',
					page: 1,
					pageSize: 6,
				},
				total: 0,
				mode: true,
				show: false,
				loading: false,
				orderFlag: false,
				haveCate: false,
				currentBrand: '',
			}
		},
		computed: {
			brandItem() {
				console.log(this.params['brandId'] === undefined);
				return this.params['brandId'] === undefined
			}
		},
		onLoad(e) {
			console.log(e.keywords);
			console.log(e.cateId);
			this.haveCate = false
			// let params = {}
			if(e.keywords) {
				this.keywords = e.keywords
				this.params.keyword = e.keywords
				this.conditionCate()
			}
			if(e.cateId) {
				this.haveCate = true
				this.keywords = e.cateName
				this.params.cateId = e.cateId
			}
			this.conditionBrand()
			this.searchGoodsList(this.params)
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.searchResult = []
			this.loading = false
			this.searchGoodsList(this.params, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if(this.params.page * this.params.pageSize >= this.total) return uni.$showMsg('数据加载完毕 T_T')
			if(this.loading) return
			this.params.page++
			this.searchGoodsList(this.params)
		},
		methods: {
			clear() {
				this.keywords = ''
				this.searchResult = []
			},
			closeFilter() {
				this.show = false
				console.log('被点击了>_<');
			},
			gotoSearch() {
				console.log(this.keywords);
				uni.navigateTo({
					url: `/subcontract/search/search?keywords=${this.keywords}`
				})
			},
			changeMode() {
				this.mode = !this.mode
			},
			async changeHandler(item, index) {
				this.current = index
				if(item === '综合') {
					delete this.params.fresh
					delete this.params.orderByPrice
					console.log('params', this.params);
					// let params = { key: '', cateId: '' }
					this.params.page = 1
					const { data: res } = await uni.$http.get(`/goods/sort/page`, this.params)
					this.searchResult = res.data.records ? res.data.records : []
				}
				if(item === '价格') {
					delete this.params.fresh
					console.log('params', this.params);
					if(this.orderFlag) {
						this.params.orderByPrice = 0
					}else {
						this.params.orderByPrice = 1
					}
					this.params.page = 1
					const { data: res } = await uni.$http.get(`/goods/sort/page`, this.params)
					this.searchResult = res.data.records ? res.data.records : []
					this.orderFlag = !this.orderFlag
				}
				if(item === '新品') {
					delete this.params.orderByPrice
					console.log('params', this.params);
					this.params.fresh = 1
					this.params.page = 1
					const { data: res } = await uni.$http.get(`/goods/sort/page`, this.params)
					console.log(res.data.records);
					this.searchResult = res.data.records ? res.data.records : []
				}
				if(item === '筛选') {
					this.show = !this.show
				}
			},
			async searchGoodsList(params, callback) {
				this.loading = true
				const { data: res } = await uni.$http.get(`/goods/sort/page`, params)
				this.loading = false
				callback && callback()
				if(res.data.records) {
					this.searchResult = [...this.searchResult, ...res.data.records]
					this.total = res.data.total
				}else {
					this.searchResult = []
				}
			},
			async conditionBrand() {
				if(this.params.cateId) {
					const { data: res } = await uni.$http.get(`/brands/goods`, { cateId: this.params.cateId })
					this.brandOptions = res.data
				}else {
					const { data: res } = await uni.$http.get('/brands/goods', { keyword: this.params.keyword })
					this.brandOptions = res.data
					// let temp = res.data
					// temp.forEach(option => {
					// 	if(this.brandOptions.find(item => { return item.id === option.id}) === undefined) {
					// 			this.brandOptions.push(option)
					// 	}
					// })
				}
			},
			async conditionCate() {
				if(!this.params.cateId) {
					const { data: res } = await uni.$http.get(`/categories/goods`, { keyword: this.params.keyword })
					this.cateOptions = res.data
					// let temp = res.data
					// temp.forEach(option => {
					// 	if(this.cateOptions.find(item => { return item.id === option.id}) === undefined) {
					// 			this.cateOptions.push(option)
					// 	}
					// })
				}
			},
			addBrandCondition(item) {
				console.log('brandId', item.id);
				if(this.params.brandId) {
					if(this.params.brandId === item.id) {
						delete this.params.brandId
					}else {
						this.params.brandId = item.id
					}
				}else {
					this.params.brandId = item.id
				}
				this.params = JSON.parse(JSON.stringify(this.params))
			},
			addCateCondition(item) {
				if(this.params.cateId) {
					if(this.params.cateId === item.id) {
						delete this.params.cateId
					}else {
						this.params.cateId = item.id
					}
				}else {
					this.params.cateId = item.id
				}
				this.params = JSON.parse(JSON.stringify(this.params))
			},
			reset() {
				delete this.params.brandId
				// delete this.params.cateId
				delete this.params.start
				delete this.params.end
				this.params = JSON.parse(JSON.stringify(this.params))
				console.log(this.params);
			},
			check() {
				if(this.params.start && this.params.end) {
					if(this.params.start > this.params.end) {
						let temp = this.params.end
						this.params.end = this.params.start
						this.params.start = temp
					}
				}
			},
			async sure() {
				console.log('sure');
				this.params.page = 1
				const { data: res } = await uni.$http.get(`/goods/sort/page`, this.params)
				this.searchResult = res.data.records ? res.data.records : []
			}
		}
	}
</script>

<style lang="scss">
.goods-list-container {
	width: 100%;
	height: 100%;
	.goods-list {
		// margin-top: 90px;
		&.flex {
			display: flex;
			flex-wrap: wrap;
		}
	}
}
.search-box {
	position: sticky;
	width: 100%;
	top: 44px;
	left: 0;
	z-index: 777;
	background-color: #fff;
}
.condition-box {
	// top: 50px;
	width: 100%;
	height: 40px;
	display: flex;
	// position: sticky;
	box-sizing: border-box;
	border-top: solid 1px #f5f5f5;
	border-bottom: solid 1px #f5f5f5;
	background-color: #fff;
	view {
		flex-grow: 1;
		color: #999;
		font-size: 12px;
		line-height: 40px;
		text-align: center;
		&.active {
			color: #000;
		}
		&.setting {
			width: 10px;
		}
	}
}
.filter-wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 888;
	&.show {
		transition: all .5s;
	}
	&.none {
		right: -100%;
		transition: all .5s;
	}
}
.filter-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 888;
	background-color: rgba(0, 0, 0, .3);
	&.show {
		display: block;
		transition: all .3s;
	}
	&.none {
		display: none;
		transition: all .3s;
	}
}
.filter-box {
	width: 78%;
	height: 100%;
	padding: 20rpx;
	position: fixed;
	box-sizing: border-box;
	top: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
	&.show {
		right: 0%;
		transition: all .3s;
	}
	&.none {
		right: -100%;
		transition: all .3s;
	}
	.btn-box {
		width: 93%;
		display: flex;
		position: absolute;
		bottom: 20rpx;
		justify-content: space-between;
		view {
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		.reset {
			width: 35%;
			border: 1px solid #d9d9d9;
		}
		.sure {
			width: 60%;
			color: #fff;
			background-color: #52e3fc;
		}
	}
}
.terms-box {
	margin: 20rpx 0;
	width: 100%;
	.condition {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.condition-value {
		display: flex;
		align-items: center;
		input {
			height: 30px;
			line-height: 30px;
			text-align: center;
			padding: 10rpx 20rpx;
			font-size: 14px;
			box-sizing: border-box;
			background-color: #f0f0f0;
		}
		text {
			margin: 0 10rpx;
		}
	}
	.tagbox {
		display: flex;
		flex-wrap: wrap;
		.tag {
			font-size: 12px;
			height: 18px;
			line-height: 18px;
			margin: 8rpx 0;
			margin-right: 10px;
			font-weight: 200;
			padding: 4px 7px;
			color: #000;
			border-radius: 3px;
			background-color: #f5f5f5;
			&.active {
				color: #fff;
				background-color: #52e3fc;
			}
		}
	}
}
.not-fount {
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin-top: 180rpx;
	flex-direction: column;
	justify-content: center;
	image {
		width: 120px;
		height: 120px;
		margin-bottom: 30rpx;
	}
	font-size: 20px;
	color: #fff;
	text-shadow: 0 0 10px #52e3fc, 0 0 20px aqua;
}
</style>
